//
//  FlexDemo.swift
//  soapp-docoment
//
//  Created by zhu xietong on 2022/12/30.
//

import Foundation
import soapp
import Eelay
class FlexDemo:TypeInitController{
    
    let content = Content()
    override func viewDidLoad() {
        super.viewDidLoad()
        top_style = .blue
        top_style.statusBarStyle = .darkContent
        top_style.navTintColor = ._foreground
        top_style.titleTextAttributes = [.foregroundColor:UIColor._foreground]
        view.eelay = [
            [content.view,[ee.T.L.B.R.safe]]
        ]
        
        title = "Flex Demo"
        view.backgroundColor = ._tableBackground
        navigationItem.rightBarButtonItem = UIBarButtonItem(systemItem: .edit)
        let user = [
            "avatar":__heads.one_str,
            "name":"老朱",
            "age":34,
            "mobile":"18687510604"
        ].mutable_dictionary
        content.mo.model = user
    }
    
    
    class Content:MoDisplayNode{
        let name = ASTextNode2()
        let avatar = JoImageNode()
        let age = ASTextNode2()
        let mobile = "18687510604".ui.font14.node
        let editBt = ASButtonNode()
        let cardBack = ASDisplayNode()
        let bt = ASButtonNode()
        
        override func addLayoutRules() {
            backgroundColor = ._tableBackground
            _ = avatar.ui.holder(type: .head).set(radius: 30)
            cardBack.bsui.background(color: ._background).set(radius: 10)
            editBt.imageNode.contentMode = .scaleAspectFit
        }
        
        override func mo_model_reload() {
            name.attributedText = mo.model["name","姓名"].ui.font14.astring
            avatar.img_url = mo["avatar"]
            age.attributedText = mo.model["age","0"].ui.font13.cl_666.astring
            editBt.ui.nimage(UIImage(_snamed: "xz-add-icon"))
            bt.addTarget(self, action: #selector(next), forControlEvents: .touchUpInside)
        }
        
        @objc func next(){
            let ctr = FlexDemoCtr()
            mo.controller?.navigationController?.pushViewController(ctr, animated: true)
            
        }
        
        override func specGetter() -> _Spec {
            /** .stack 数组参数说
                《1》数组的第一项均为 h、v开头的简易字符   (该字符的解析逻辑在MiniFlexValue.swift 文件的 321 ～ 357 行)
                    （1）h开头表示横向布局，v开头表示纵向布局
                    （2）字符串中包含数字时表示的是轴向的布局间隔
                    （3）字符串中包含的-、= 表示的是子组建轴向的对齐方式(FlexAlignItems 值)，-表示剧中对齐[center]，=表示拉升填充对齐[stretch]，简易字符只处理了-,= 的识别，如果需要更多对其方式请在stack 的数组参数中追加   &-.center    &-.flex_end   &-.baseline_first    &-.stretch     &-.flex_start    【&-.XXXXX   赋值的就是 FlexAlignItems 值】
                    （3）字符串中包含的c,e,s,a,b 表示的是FlexJustifyContent 属性，分别表示的 是 center ,  end , start ,spaceAround,spaceBetween ，简易字符设置justifyContent 属性是2021年扩展的，项目种部分代码 也在 stack 数组参数追加 _justfy(v:FlexJustifyContent) 来设置justifyContent 属性, 例如 _justfy(.center) 就是给.stack 的 justifyContent 赋值居中

                《2》数组参数可添加高度【数字型字符串】，宽度【数字】，FlexAlignItems【&-. 开头的枚举类型】，FlexJustifyContent【_just(XXX)的结构体】， _grow(XX)【该stack 的延伸值】, _shrink(XX)【该stack的压缩值】 这几种的参数
             */
                        
            let val = 3
            let userContent:_Spec = .stack(["h-"], childs: [
                avatar["60",60],//60高度，60宽度
                3,//3的间隔（此处间隔只能是纯数字，不能包含加减乘除的运算，如果存在动态计算，请参照以下设置为6的间隔）
                "4",//4的间隔（此处间隔只能是纯数字的字符，不包含字符传的拼接转换，作用和使用数字是一样的）,
                .stack([(2 * val)], childs: []),//6的间隔
                .stack(["v=","<1>"], childs: [//v 表示纵轴布局，= 表示子内容轴向strech【拉伸】对齐
                    .stack(["h-10b"], childs: [// h表示横轴布局，-表示子内容轴向center[居中]对齐，b表示的是justContent为space_between，10表示的是子布局项存在10 的间隔
                        name|,
                        age|
                    ]),
                    10,
                    .stack(["h",&-.center], childs: [// h表示横轴布局，&-.center表示子内容轴向center[居中]对齐，
                        mobile|,
                        "<1>",//改字符会创建一个间隔, 是<1,1> 的简写,代码内的机制实质是创建了一个.stack 的布局结构，并在结构的数组参数中追加了_grow(1),_shrink(1) 这两个参数，该间隔设置了grow,shrink 属性第一个数字设置的是grow(可延伸值)为1，shrink(可压缩值)为1
                        editBt[14,"14"]
                    ])
                ])
            ]).addOver(bt|)
            
            return .inset([], [14], child: .stack(["v="], childs: [
                .inset([], [10,20], child: userContent).addBack(cardBack|)
            ]))
            
        }
    }
}
